<template>
	<view class="content">
		<u-navbar class="head-index" :fixed="false" :safeAreaInsetTop="true" bgColor="#fff" titleStyle="color:#333"
			:title="!ChoiceCell ? TitleName : VersionName">
			<view class="u-nav-slot" slot="left">
				<!-- <uni-icons color="#333" size="20" custom-prefix="iconfont" type="icon-arrow-left" @click="GoBack"
					style="margin-left: 15px;"></uni-icons> -->
				<uni-icons fontFamily="CustomFontPlatform" color="#333"
					:size="20">{{$utils.toUniCode('&#xe60d;')}}</uni-icons>
			</view>
		</u-navbar>

		<view class="progress-box">
			<progress v-show="ShowActive" :percent="percent" style="width: 100%;" color="#51d0d0" :show-info="false"
				active="true" active-mode="forwards" :stroke-width="2" backgroundColor="#fff"></progress>
		</view>


		<view class="MainBox">
			<u-cell-group :border="false" v-if="!ChoiceCell">
				<u-cell :border="false" :title="item.title" v-for="item in VersionInfo" :key="item.id"
					@click="LookVersionInfo(item)" label="2023-11-02" style="margin-bottom: 8px;"
					titleStyle="font-weight:600;font-size:16px;">
					<u-icon slot="right-icon" size="20" name="arrow-right"></u-icon>
				</u-cell>
			</u-cell-group>

			<view v-else style="height: 100%;display: flex;flex-direction: column;">
				<view style="flex: 1;">
					<view class="label" v-for="(item,index) in TreeInfo" :key="index">
						<view style="font-size: 15px;padding: 6px 0;">
							<text>{{item.label}}</text>
						</view>
						<ul>
							<li v-for="(ReItem,ind) in item.Children" :key="ind"
								style="padding: 10px 0;display: flex;align-items: center;font-size: 14px;letter-spacing: 2px;">
								<view
									style="width: 4px;height: 4px;border-radius: 50%;background-color: #333;margin-right: 10px;">
								</view>
								<text>{{ReItem.text}}</text>
							</li>
						</ul>
					</view>
				</view>

				<view style="height: 60px;">
					<button type="default"
						style="color: #fff;background-color: #51d0d0;border-radius: 12px;">点此更新至最新版本</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				filterArray: [1, 2, 3, 4, 5],
				percent: 0, //百分比0~100
				TitleName: '功能更新日志',
				version: '',
				ChoiceCell: false, // 是否选中更新信息
				ShowActive: false, // 是否展示进度条
				VersionName: '',
				VersionInfo: [ // 日志信息
					{
						id: 0,
						title: 'QMS7.0.9主要更新',
					}, {
						id: 1,
						title: 'QMS7.0.8主要更新',
					}, {
						id: 2,
						title: 'QMS7.0.7主要更新',
					}, {
						id: 3,
						title: 'QMS7.0.6主要更新',
					}, {
						id: 4,
						title: 'QMS7.0.5主要更新',
					}, {
						id: 5,
						title: 'QMS7.0.4主要更新',
					}, {
						id: 6,
						title: 'QMS7.0.3主要更新',
					},
				],
				TreeInfo: [{
					label: '新增',
					Children: [{
						text: '新增单据信息'
					}, {
						text: '新增检验类型'
					}]
				}, {
					label: '优化',
					Children: [{
						text: '优化设别配网性能体验'
					}, {
						text: '优化插件启动'
					}]
				}],

			}
		},
		onShow() {
			// 获取客户端的版本名称
			// console.log(plus.runtime.versionCode)
			this.version = plus.runtime.version
		},
		onLoad() {
			var that = this
			that.ShowActive = true
			let clearInt = setInterval(() => {
				that.percent++;
				if (that.percent === 100) {
					clearInterval(clearInt)

					that.ShowActive = false
					that.percent = 0
				}
			}, 3)

		},
		methods: {
			change() {
				var that = this;
				// 开启定时器，定时器同样可以用在请求当中
				let clearInt = setInterval(() => {
					that.percent++;
					if (that.percent === 100) {
						clearInterval(clearInt)
						// that.ChoiceCell = true
						that.EndActive()
					}
				}, 2)
			},
			EndActive() { // 动画完成事件
				var that = this;
				that.ShowActive = false
				that.ChoiceCell = true
				that.percent = 0
			},
			LookVersionInfo(data) {
				var that = this;
				that.ShowActive = true
				this.change()
				that.VersionName = data.title
			},
			GoBack() {
				var that = this
				if (that.ChoiceCell) {
					that.ChoiceCell = false
				} else {
					uni.navigateBack()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		list-style: none;
	}

	// 按钮的边框线在这里去除
	uni-button:after {
		border: none !important;
	}

	.progress-box {
		display: flex;
		height: 3rpx;
		// margin-bottom: 60rpx;
	}


	.content {
		position: relative;
		// background-color: #f5f6fa;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.MainBox {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding: 10px 20px !important;
			overflow: auto;
		}
	}
</style>